
<!-- saved from url=(0025)http://colpick.com/plugin -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><div class="webkit-line-gutter-backdrop"></div><table><tbody><tr><td class="webkit-line-number" value="1"></td><td class="webkit-line-content"><span class="webkit-html-doctype">&lt;!DOCTYPE html&gt;</span></td></tr><tr><td class="webkit-line-number" value="2"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;html&gt;</span></td></tr><tr><td class="webkit-line-number" value="3"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;head&gt;</span></td></tr><tr><td class="webkit-line-number" value="4"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;title&gt;</span>jQuery Color Picker, Selector, Chooser Plugin - colpick.com<span class="webkit-html-tag">&lt;/title&gt;</span></td></tr><tr><td class="webkit-line-number" value="5"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;meta <span class="webkit-html-attribute-name">name</span>="<span class="webkit-html-attribute-value">description</span>" <span class="webkit-html-attribute-name">content</span>="<span class="webkit-html-attribute-value">colpick's jQuery RGB, HEX and HSB Color Picker plugin is free, lightweight and customizable</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="6"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;meta <span class="webkit-html-attribute-name">charset</span>="<span class="webkit-html-attribute-value">UTF-8</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="7"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;link <span class="webkit-html-attribute-name">rel</span>="<span class="webkit-html-attribute-value">stylesheet</span>" <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-resource-link" target="_blank" href="http://colpick.com/css/normalize.css">css/normalize.css</a>" <span class="webkit-html-attribute-name">type</span>="<span class="webkit-html-attribute-value">text/css</span>" /&gt;</span></td></tr><tr><td class="webkit-line-number" value="8"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;link <span class="webkit-html-attribute-name">rel</span>="<span class="webkit-html-attribute-value">stylesheet</span>" <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-resource-link" target="_blank" href="http://colpick.com/css/style.css">css/style.css</a>" <span class="webkit-html-attribute-name">type</span>="<span class="webkit-html-attribute-value">text/css</span>" /&gt;</span></td></tr><tr><td class="webkit-line-number" value="9"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;link <span class="webkit-html-attribute-name">rel</span>="<span class="webkit-html-attribute-value">stylesheet</span>" <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-resource-link" target="_blank" href="http://colpick.com/colpick/css/colpick.css">colpick/css/colpick.css</a>" <span class="webkit-html-attribute-name">type</span>="<span class="webkit-html-attribute-value">text/css</span>" /&gt;</span></td></tr><tr><td class="webkit-line-number" value="10"></td><td class="webkit-line-content"><span class="webkit-html-comment">&lt;!--[if lt IE 9]&gt;</span></td></tr><tr><td class="webkit-line-number" value="11"></td><td class="webkit-line-content"><span class="webkit-html-comment">&lt;script src="js/html5shiv.js"&gt;&lt;/script&gt;</span></td></tr><tr><td class="webkit-line-number" value="12"></td><td class="webkit-line-content"><span class="webkit-html-comment">&lt;![endif]--&gt;</span></td></tr><tr><td class="webkit-line-number" value="13"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;script <span class="webkit-html-attribute-name">src</span>="<a class="webkit-html-attribute-value webkit-html-resource-link" target="_blank" href="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js</a>"&gt;</span><span class="webkit-html-tag">&lt;/script&gt;</span></td></tr><tr><td class="webkit-line-number" value="14"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;script <span class="webkit-html-attribute-name">src</span>="<a class="webkit-html-attribute-value webkit-html-resource-link" target="_blank" href="http://colpick.com/colpick/js/colpick.js">colpick/js/colpick.js</a>"&gt;</span><span class="webkit-html-tag">&lt;/script&gt;</span></td></tr><tr><td class="webkit-line-number" value="15"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;script <span class="webkit-html-attribute-name">src</span>="<a class="webkit-html-attribute-value webkit-html-resource-link" target="_blank" href="http://colpick.com/js/plugin.js">js/plugin.js</a>"&gt;</span><span class="webkit-html-tag">&lt;/script&gt;</span></td></tr><tr><td class="webkit-line-number" value="16"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;link <span class="webkit-html-attribute-name">rel</span>="<span class="webkit-html-attribute-value">shortcut icon</span>" <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-resource-link" target="_blank" href="http://colpick.com/favicon.ico">favicon.ico</a>" <span class="webkit-html-attribute-name">type</span>="<span class="webkit-html-attribute-value">image/x-icon</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="17"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;link <span class="webkit-html-attribute-name">rel</span>="<span class="webkit-html-attribute-value">icon</span>" <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-resource-link" target="_blank" href="http://colpick.com/favicon.ico">favicon.ico</a>" <span class="webkit-html-attribute-name">type</span>="<span class="webkit-html-attribute-value">image/x-icon</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="18"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;script&gt;</span>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");<span class="webkit-html-tag">&lt;/script&gt;</span></td></tr><tr><td class="webkit-line-number" value="19"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;/head&gt;</span></td></tr><tr><td class="webkit-line-number" value="20"></td><td class="webkit-line-content"><br></td></tr><tr><td class="webkit-line-number" value="21"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;body&gt;</span></td></tr><tr><td class="webkit-line-number" value="22"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">id</span>="<span class="webkit-html-attribute-value">fb-root</span>"&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="23"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;script&gt;</span></td></tr><tr><td class="webkit-line-number" value="24"></td><td class="webkit-line-content">(function(d, s, id) {</td></tr><tr><td class="webkit-line-number" value="25"></td><td class="webkit-line-content">  var js, fjs = d.getElementsByTagName(s)[0];</td></tr><tr><td class="webkit-line-number" value="26"></td><td class="webkit-line-content">  if (d.getElementById(id)) return;</td></tr><tr><td class="webkit-line-number" value="27"></td><td class="webkit-line-content">  js = d.createElement(s); js.id = id;</td></tr><tr><td class="webkit-line-number" value="28"></td><td class="webkit-line-content">  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";</td></tr><tr><td class="webkit-line-number" value="29"></td><td class="webkit-line-content">  fjs.parentNode.insertBefore(js, fjs);</td></tr><tr><td class="webkit-line-number" value="30"></td><td class="webkit-line-content">}(document, 'script', 'facebook-jssdk'));</td></tr><tr><td class="webkit-line-number" value="31"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;/script&gt;</span></td></tr><tr><td class="webkit-line-number" value="32"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;script&gt;</span></td></tr><tr><td class="webkit-line-number" value="33"></td><td class="webkit-line-content">  var _gaq = _gaq || [];</td></tr><tr><td class="webkit-line-number" value="34"></td><td class="webkit-line-content">  _gaq.push(['_setAccount', 'UA-20934114-4']);</td></tr><tr><td class="webkit-line-number" value="35"></td><td class="webkit-line-content">  _gaq.push(['_trackPageview']);</td></tr><tr><td class="webkit-line-number" value="36"></td><td class="webkit-line-content"><br></td></tr><tr><td class="webkit-line-number" value="37"></td><td class="webkit-line-content">  (function() {</td></tr><tr><td class="webkit-line-number" value="38"></td><td class="webkit-line-content">    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;</td></tr><tr><td class="webkit-line-number" value="39"></td><td class="webkit-line-content">    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';</td></tr><tr><td class="webkit-line-number" value="40"></td><td class="webkit-line-content">    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);</td></tr><tr><td class="webkit-line-number" value="41"></td><td class="webkit-line-content">  })();</td></tr><tr><td class="webkit-line-number" value="42"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;/script&gt;</span></td></tr><tr><td class="webkit-line-number" value="43"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;header <span class="webkit-html-attribute-name">id</span>="<span class="webkit-html-attribute-value">site-header</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="44"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">id</span>="<span class="webkit-html-attribute-value">header-cont</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="45"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;h1&gt;</span><span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-external-link" target="_blank" href="http://colpick.com/">http://colpick.com</a>" <span class="webkit-html-attribute-name">title</span>="<span class="webkit-html-attribute-value">colpick Color Picker home page</span>"&gt;</span><span class="webkit-html-tag">&lt;img <span class="webkit-html-attribute-name">src</span>="<a class="webkit-html-attribute-value webkit-html-resource-link" target="_blank" href="http://colpick.com/images/wheel.png">images/wheel.png</a>" <span class="webkit-html-attribute-name">alt</span>="<span class="webkit-html-attribute-value">Color Picker</span>" /&gt;</span>colpick Color Picker<span class="webkit-html-tag">&lt;/a&gt;</span><span class="webkit-html-tag">&lt;/h1&gt;</span></td></tr><tr><td class="webkit-line-number" value="46"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;nav <span class="webkit-html-attribute-name">id</span>="<span class="webkit-html-attribute-value">top-menu</span>" <span class="webkit-html-attribute-name">role</span>="<span class="webkit-html-attribute-value">navigation</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="47"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;ul&gt;</span></td></tr><tr><td class="webkit-line-number" value="48"></td><td class="webkit-line-content">				<span class="webkit-html-tag">&lt;li&gt;</span><span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-external-link" target="_blank" href="http://colpick.com/">.</a>" <span class="webkit-html-attribute-name">title</span>="<span class="webkit-html-attribute-value">colpick Color Picker home page</span>"&gt;</span>Color Picker<span class="webkit-html-tag">&lt;/a&gt;</span><span class="webkit-html-tag">&lt;/li&gt;</span></td></tr><tr><td class="webkit-line-number" value="49"></td><td class="webkit-line-content">				<span class="webkit-html-tag">&lt;li <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">current</span>"&gt;</span><span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-external-link" target="_blank" href="./view-source colpick.com plugin_files/view-source colpick.com plugin.htm">plugin</a>" <span class="webkit-html-attribute-name">title</span>="<span class="webkit-html-attribute-value">Download colpick's jQuery plugin for your web app</span>"&gt;</span>jQuery Plugin<span class="webkit-html-tag">&lt;/a&gt;</span><span class="webkit-html-tag">&lt;/li&gt;</span></td></tr><tr><td class="webkit-line-number" value="50"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;/ul&gt;</span></td></tr><tr><td class="webkit-line-number" value="51"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/nav&gt;</span></td></tr><tr><td class="webkit-line-number" value="52"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;h2&gt;</span>Simple RGB, HSB, HEX Color Picker jQuery Plugin<span class="webkit-html-tag">&lt;/h2&gt;</span></td></tr><tr><td class="webkit-line-number" value="53"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="54"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;/header&gt;</span></td></tr><tr><td class="webkit-line-number" value="55"></td><td class="webkit-line-content"><br></td></tr><tr><td class="webkit-line-number" value="56"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">id</span>="<span class="webkit-html-attribute-value">content</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="57"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">right-col</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="58"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">light-box clearfix</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="59"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">green-btn</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="60"></td><td class="webkit-line-content">				<span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-external-link" target="_blank" href="https://github.com/josedvq/colpick-jQuery-Color-Picker/archive/master.zip">https://github.com/josedvq/colpick-jQuery-Color-Picker/archive/master.zip</a>" <span class="webkit-html-attribute-name">title</span>="<span class="webkit-html-attribute-value">Download the zipped files</span>" &gt;</span></td></tr><tr><td class="webkit-line-number" value="61"></td><td class="webkit-line-content">				<span class="webkit-html-tag">&lt;h3&gt;</span>Download jQuery Plugin<span class="webkit-html-tag">&lt;/h3&gt;</span></td></tr><tr><td class="webkit-line-number" value="62"></td><td class="webkit-line-content">				<span class="webkit-html-tag">&lt;p&gt;</span>.zip<span class="webkit-html-tag">&lt;/p&gt;</span></td></tr><tr><td class="webkit-line-number" value="63"></td><td class="webkit-line-content">				<span class="webkit-html-tag">&lt;/a&gt;</span></td></tr><tr><td class="webkit-line-number" value="64"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="65"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">dark-btn</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="66"></td><td class="webkit-line-content">				<span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-external-link" target="_blank" href="https://github.com/josedvq/colpick-jQuery-Color-Picker/">https://github.com/josedvq/colpick-jQuery-Color-Picker/</a>" <span class="webkit-html-attribute-name">title</span>="<span class="webkit-html-attribute-value">Go to GitHub repo</span>" &gt;</span><span class="webkit-html-tag">&lt;h3&gt;</span>GitHub<span class="webkit-html-tag">&lt;/h3&gt;</span><span class="webkit-html-tag">&lt;/a&gt;</span></td></tr><tr><td class="webkit-line-number" value="67"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="68"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">id</span>="<span class="webkit-html-attribute-value">share</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="69"></td><td class="webkit-line-content">				<span class="webkit-html-tag">&lt;h2&gt;</span>Recommend this picker<span class="webkit-html-tag">&lt;/h2&gt;</span></td></tr><tr><td class="webkit-line-number" value="70"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">share-box</span>"&gt;</span><span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">fb-like</span>" <span class="webkit-html-attribute-name">data-href</span>="<span class="webkit-html-attribute-value">http://colpick.com</span>" <span class="webkit-html-attribute-name">data-layout</span>="<span class="webkit-html-attribute-value">box_count</span>" <span class="webkit-html-attribute-name">data-show-faces</span>="<span class="webkit-html-attribute-value">false</span>" <span class="webkit-html-attribute-name">data-send</span>="<span class="webkit-html-attribute-value">false</span>"&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="71"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">share-box</span>"&gt;</span><span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-external-link" target="_blank" href="https://twitter.com/share">https://twitter.com/share</a>" <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">twitter-share-button</span>" <span class="webkit-html-attribute-name">data-lang</span>="<span class="webkit-html-attribute-value">en</span>" <span class="webkit-html-attribute-name">data-count</span>="<span class="webkit-html-attribute-value">vertical</span>" <span class="webkit-html-attribute-name">data-url</span>="<span class="webkit-html-attribute-value">http://colpick.com</span>"&gt;</span>Tweet<span class="webkit-html-tag">&lt;/a&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="72"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">share-box</span>"&gt;</span><span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">g-plusone</span>" <span class="webkit-html-attribute-name">data-size</span>="<span class="webkit-html-attribute-value">tall</span>" <span class="webkit-html-attribute-name">data-href</span>="<span class="webkit-html-attribute-value">http://colpick.com</span>"&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="73"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">clear</span>"&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span>			<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="74"></td><td class="webkit-line-content">			</td></tr><tr><td class="webkit-line-number" value="75"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="76"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">compat</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="77"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;h3&gt;</span>Requires<span class="webkit-html-tag">&lt;/h3&gt;</span></td></tr><tr><td class="webkit-line-number" value="78"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;p&gt;</span>jQuery 1.7.0 or later<span class="webkit-html-tag">&lt;/p&gt;</span></td></tr><tr><td class="webkit-line-number" value="79"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="80"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="81"></td><td class="webkit-line-content">	</td></tr><tr><td class="webkit-line-number" value="82"></td><td class="webkit-line-content">	</td></tr><tr><td class="webkit-line-number" value="83"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">id</span>="<span class="webkit-html-attribute-value">pickers0</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="84"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">id</span>="<span class="webkit-html-attribute-value">picker01</span>"&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="85"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">id</span>="<span class="webkit-html-attribute-value">picker02</span>"&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="86"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="87"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;ul <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">features</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="88"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;li&gt;</span><span class="webkit-html-tag">&lt;span <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">bold</span>"&gt;</span>No images!<span class="webkit-html-tag">&lt;/span&gt;</span> Just a JS and a CSS file<span class="webkit-html-tag">&lt;/li&gt;</span></td></tr><tr><td class="webkit-line-number" value="89"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;li&gt;</span>Very intuitive Photoshop-like interface<span class="webkit-html-tag">&lt;/li&gt;</span></td></tr><tr><td class="webkit-line-number" value="90"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;li&gt;</span>Light and dark easy-to-customize CSS3 skins<span class="webkit-html-tag">&lt;/li&gt;</span></td></tr><tr><td class="webkit-line-number" value="91"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;li&gt;</span><span class="webkit-html-tag">&lt;span <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">bold</span>"&gt;</span>28 KB total<span class="webkit-html-tag">&lt;/span&gt;</span> loaded by the browser<span class="webkit-html-tag">&lt;/li&gt;</span></td></tr><tr><td class="webkit-line-number" value="92"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;li&gt;</span>Works and looks nice <span class="webkit-html-tag">&lt;span <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">bold</span>"&gt;</span>even on IE7<span class="webkit-html-tag">&lt;/span&gt;</span><span class="webkit-html-tag">&lt;/li&gt;</span></td></tr><tr><td class="webkit-line-number" value="93"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;li&gt;</span>Extremely easy to implement<span class="webkit-html-tag">&lt;/li&gt;</span></td></tr><tr><td class="webkit-line-number" value="94"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/ul&gt;</span></td></tr><tr><td class="webkit-line-number" value="95"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;h2 <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">cleft</span>"&gt;</span>Usage<span class="webkit-html-tag">&lt;/h2&gt;</span></td></tr><tr><td class="webkit-line-number" value="96"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;p&gt;</span>Download the plugin and add colpick.js and colpick.css to the head of your documents:<span class="webkit-html-tag">&lt;/p&gt;</span></td></tr><tr><td class="webkit-line-number" value="97"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;pre&gt;</span>&amp;lt;script src="js/colpick.js" type="text/javascript"&amp;gt;&amp;lt;/script&amp;gt;</td></tr><tr><td class="webkit-line-number" value="98"></td><td class="webkit-line-content">&amp;lt;link rel="stylesheet" href="css/colpick.css" type="text/css"/&amp;gt;<span class="webkit-html-tag">&lt;/pre&gt;</span></td></tr><tr><td class="webkit-line-number" value="99"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;p&gt;</span>Now you may call the <span class="webkit-html-tag">&lt;code&gt;</span>colpick<span class="webkit-html-tag">&lt;/code&gt;</span> method on any jQuery object to create a color picker. By default you get a dropdown color picker:<span class="webkit-html-tag">&lt;/p&gt;</span></td></tr><tr><td class="webkit-line-number" value="100"></td><td class="webkit-line-content">	</td></tr><tr><td class="webkit-line-number" value="101"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">example dark-example clearfix</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="102"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;h3&gt;</span>Example - defaults<span class="webkit-html-tag">&lt;/h3&gt;</span></td></tr><tr><td class="webkit-line-number" value="103"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">example-code</span>"&gt;</span>	</td></tr><tr><td class="webkit-line-number" value="104"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;p&gt;</span><span class="webkit-html-tag">&lt;span <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">code-lang</span>"&gt;</span>HTML<span class="webkit-html-tag">&lt;/span&gt;</span><span class="webkit-html-tag">&lt;/p&gt;</span> <span class="webkit-html-tag">&lt;pre&gt;</span>&amp;lt;button id="picker"&amp;gt;Show Color Picker&amp;lt;/button&amp;gt;<span class="webkit-html-tag">&lt;/pre&gt;</span></td></tr><tr><td class="webkit-line-number" value="105"></td><td class="webkit-line-content">			</td></tr><tr><td class="webkit-line-number" value="106"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;p&gt;</span><span class="webkit-html-tag">&lt;span <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">code-lang</span>"&gt;</span>JS<span class="webkit-html-tag">&lt;/span&gt;</span><span class="webkit-html-tag">&lt;/p&gt;</span> <span class="webkit-html-tag">&lt;pre&gt;</span>$('#picker').colpick();<span class="webkit-html-tag">&lt;/pre&gt;</span></td></tr><tr><td class="webkit-line-number" value="107"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="108"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">example-ex</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="109"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;button <span class="webkit-html-attribute-name">id</span>="<span class="webkit-html-attribute-value">picker1</span>"&gt;</span>Show Color Picker<span class="webkit-html-tag">&lt;/button&gt;</span></td></tr><tr><td class="webkit-line-number" value="110"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="111"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">clear</span>"&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="112"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="113"></td><td class="webkit-line-content">	</td></tr><tr><td class="webkit-line-number" value="114"></td><td class="webkit-line-content">	</td></tr><tr><td class="webkit-line-number" value="115"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;h2&gt;</span>Options<span class="webkit-html-tag">&lt;/h2&gt;</span></td></tr><tr><td class="webkit-line-number" value="116"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;p&gt;</span>Several options passed to the colpick function as an object allow you to customize the color picker. For example, passing <span class="webkit-html-tag">&lt;code&gt;</span>flat:true<span class="webkit-html-tag">&lt;/code&gt;</span> makes the color picker always visible, as in the following example.<span class="webkit-html-tag">&lt;/p&gt;</span></td></tr><tr><td class="webkit-line-number" value="117"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">example dark-example clearfix</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="118"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;h3&gt;</span>Example - Flat mode, hex layout, no submit button<span class="webkit-html-tag">&lt;/h3&gt;</span></td></tr><tr><td class="webkit-line-number" value="119"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">example-code</span>"&gt;</span>	</td></tr><tr><td class="webkit-line-number" value="120"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;p&gt;</span><span class="webkit-html-tag">&lt;span <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">code-lang</span>"&gt;</span>HTML<span class="webkit-html-tag">&lt;/span&gt;</span><span class="webkit-html-tag">&lt;/p&gt;</span><span class="webkit-html-tag">&lt;pre&gt;</span>&amp;lt;div id="picker"&amp;gt;&amp;lt;/div&amp;gt;<span class="webkit-html-tag">&lt;/pre&gt;</span></td></tr><tr><td class="webkit-line-number" value="121"></td><td class="webkit-line-content">			</td></tr><tr><td class="webkit-line-number" value="122"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;p&gt;</span><span class="webkit-html-tag">&lt;span <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">code-lang</span>"&gt;</span>JS<span class="webkit-html-tag">&lt;/span&gt;</span><span class="webkit-html-tag">&lt;/p&gt;</span></td></tr><tr><td class="webkit-line-number" value="123"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;pre&gt;</span>$('#picker').colpick({</td></tr><tr><td class="webkit-line-number" value="124"></td><td class="webkit-line-content">	flat:true,</td></tr><tr><td class="webkit-line-number" value="125"></td><td class="webkit-line-content">	layout:'hex',</td></tr><tr><td class="webkit-line-number" value="126"></td><td class="webkit-line-content">	submit:0</td></tr><tr><td class="webkit-line-number" value="127"></td><td class="webkit-line-content">});</td></tr><tr><td class="webkit-line-number" value="128"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;/pre&gt;</span></td></tr><tr><td class="webkit-line-number" value="129"></td><td class="webkit-line-content">			</td></tr><tr><td class="webkit-line-number" value="130"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="131"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">example-ex</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="132"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">id</span>="<span class="webkit-html-attribute-value">picker2</span>"&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="133"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="134"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">clear</span>"&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="135"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="136"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">name</span>="<span class="webkit-html-attribute-value">options</span>"&gt;</span><span class="webkit-html-tag">&lt;/a&gt;</span></td></tr><tr><td class="webkit-line-number" value="137"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;p&gt;</span>All the available options are:<span class="webkit-html-tag">&lt;/p&gt;</span></td></tr><tr><td class="webkit-line-number" value="138"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;table <span class="webkit-html-attribute-name">border</span>="" <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">plugin-options</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="139"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="140"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;th&gt;</span>Option<span class="webkit-html-tag">&lt;/th&gt;</span></td></tr><tr><td class="webkit-line-number" value="141"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;th&gt;</span>Type<span class="webkit-html-tag">&lt;/th&gt;</span></td></tr><tr><td class="webkit-line-number" value="142"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;th&gt;</span>Description<span class="webkit-html-tag">&lt;/th&gt;</span></td></tr><tr><td class="webkit-line-number" value="143"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="144"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="145"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>flat<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="146"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>boolean<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="147"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Flat mode just displays the color picker in place, always visible, with no show/hide behavior. Use it with <span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-external-link" target="_blank" href="http://colpick.com/plugin#funcs">#funcs</a>"&gt;</span>colpickShow()<span class="webkit-html-tag">&lt;/a&gt;</span> and <span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-external-link" target="_blank" href="http://colpick.com/plugin#funcs">#funcs</a>"&gt;</span>colpickHide()<span class="webkit-html-tag">&lt;/a&gt;</span> to define your own show/hide behavior or if you want the picker to be always visible. Default: false<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="148"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="149"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="150"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>layout<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="151"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>string<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="152"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Name of the color picker layout to use. Posible values are 'full' (RGB, HEX, and HSB fields), 'rgbhex' (no HSB fields) and hex (no HSB, no RGB). You can see the full layout at the top of the page. rgbhex and hex layouts are shown in the <span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-external-link" target="_blank" href="http://colpick.com/plugin#examples">#examples</a>"&gt;</span>examples<span class="webkit-html-tag">&lt;/a&gt;</span> below. Default: 'full'<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="153"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="154"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="155"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>submit<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="156"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>boolean<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="157"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>If false the picker has no submit or OK button and no previous color viewer. If false use <span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-external-link" target="_blank" href="http://colpick.com/plugin#funcs">#funcs</a>"&gt;</span>onChange function<span class="webkit-html-tag">&lt;/a&gt;</span> to get the picked color. Default: true<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="158"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="159"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="160"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>colorScheme<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="161"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>string<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="162"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>The color scheme to use for the picker, 'light' or 'dark'. Default: 'light'<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="163"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="164"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="165"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>submitText<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="166"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>string<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="167"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>The text to show on the submit button if active. Default: 'OK'<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="168"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="169"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="170"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>color<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="171"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>string or object<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="172"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Default color. Hex string (eg. 'ff0000') or object for RGB (eg. {r:255, g:0, b:0}) and HSB (eg. {h:0, s:100, b:100}). Default: '11ff00'<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="173"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="174"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="175"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>showEvent<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="176"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>string<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="177"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Event that shows the color picker. Default: 'click'<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="178"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="179"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="180"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>livePreview<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="181"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>boolean<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="182"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>If true color values change live while the user moves a selector or types in a field. Turn it off to improve speed. Default: true<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="183"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="184"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="185"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>onBeforeShow<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="186"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>function<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="187"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Callback function triggered before the color picker is shown. Use it to define custom behavior. Should receive a colorpicker DOM object.<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="188"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="189"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="190"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>onShow<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="191"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>function<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="192"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Callback function triggered when the color picker is shown. Use it to define custom behavior. Should receive a colorpicker DOM object.<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="193"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="194"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="195"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>onHide<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="196"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>function<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="197"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Callback function triggered when the color picker is hidden. Use it to define custom behavior. Should receive a colorpicker DOM object.<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="198"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="199"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="200"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>onChange<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="201"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>function<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="202"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Callback function triggered when the color is changed. This is the function that <span class="webkit-html-tag">&lt;strong&gt;</span>allows you to get the color picked by the user whenever it changes, whithout the user pressing the OK button<span class="webkit-html-tag">&lt;/strong&gt;</span>. Should receive:</td></tr><tr><td class="webkit-line-number" value="203"></td><td class="webkit-line-content">				<span class="webkit-html-tag">&lt;ul&gt;</span></td></tr><tr><td class="webkit-line-number" value="204"></td><td class="webkit-line-content">					<span class="webkit-html-tag">&lt;li&gt;</span>HSB object (eg. {h:0, s:100, b:100})<span class="webkit-html-tag">&lt;/li&gt;</span></td></tr><tr><td class="webkit-line-number" value="205"></td><td class="webkit-line-content">					<span class="webkit-html-tag">&lt;li&gt;</span>HEX string (with no #)<span class="webkit-html-tag">&lt;/li&gt;</span></td></tr><tr><td class="webkit-line-number" value="206"></td><td class="webkit-line-content">					<span class="webkit-html-tag">&lt;li&gt;</span>RGB object(eg. {r:255, g:0, b:0})<span class="webkit-html-tag">&lt;/li&gt;</span></td></tr><tr><td class="webkit-line-number" value="207"></td><td class="webkit-line-content">					<span class="webkit-html-tag">&lt;li&gt;</span>el element, the parent element on which colorpicker() was called. Use it to modify this parent element on change (see first example below).<span class="webkit-html-tag">&lt;/li&gt;</span></td></tr><tr><td class="webkit-line-number" value="208"></td><td class="webkit-line-content">					<span class="webkit-html-tag">&lt;li&gt;</span>bySetColor flag: if true, the onChange callback was fired by the colpickSetColor function and not by the user changing the color directly in the picker. There are some cases in which you'll want a different behaviour in this case (see last example).<span class="webkit-html-tag">&lt;/li&gt;</span></td></tr><tr><td class="webkit-line-number" value="209"></td><td class="webkit-line-content">				<span class="webkit-html-tag">&lt;/ul&gt;</span></td></tr><tr><td class="webkit-line-number" value="210"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="211"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="212"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="213"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>onSubmit<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="214"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>function<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="215"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Callback function <span class="webkit-html-tag">&lt;strong&gt;</span>triggered when the color is chosen by the user, using the OK button<span class="webkit-html-tag">&lt;/strong&gt;</span>. Should receive exactly the same as onChange. It's never fired if using <span class="webkit-html-tag">&lt;code&gt;</span>submit:0<span class="webkit-html-tag">&lt;/code&gt;</span> option.<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="216"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="217"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;/table&gt;</span></td></tr><tr><td class="webkit-line-number" value="218"></td><td class="webkit-line-content">	</td></tr><tr><td class="webkit-line-number" value="219"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">name</span>="<span class="webkit-html-attribute-value">funcs</span>"&gt;</span><span class="webkit-html-tag">&lt;/a&gt;</span></td></tr><tr><td class="webkit-line-number" value="220"></td><td class="webkit-line-content">	</td></tr><tr><td class="webkit-line-number" value="221"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;h2&gt;</span>jQuery.fn Functions<span class="webkit-html-tag">&lt;/h2&gt;</span></td></tr><tr><td class="webkit-line-number" value="222"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;p&gt;</span>These functions are the color picker's interface. Use them to control the color picker externally, but not to get color values. To retrieve color values from the picker use the <span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-external-link" target="_blank" href="http://colpick.com/plugin#options">#options</a>"&gt;</span>onSubmit and onChange callbacks<span class="webkit-html-tag">&lt;/a&gt;</span>.<span class="webkit-html-tag">&lt;/p&gt;</span></td></tr><tr><td class="webkit-line-number" value="223"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;table <span class="webkit-html-attribute-name">border</span>="" <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">plugin-options</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="224"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="225"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;th&gt;</span>Function<span class="webkit-html-tag">&lt;/th&gt;</span></td></tr><tr><td class="webkit-line-number" value="226"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;th&gt;</span>Description<span class="webkit-html-tag">&lt;/th&gt;</span></td></tr><tr><td class="webkit-line-number" value="227"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="228"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="229"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>colpick(options)<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="230"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>The main function used to create a color picker.<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="231"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="232"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="233"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>colpickHide()<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="234"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Hides de color picker. Accepts no arguments. Use it to hide the picker with an external trigger.<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="235"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="236"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="237"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>colpickShow()<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="238"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Shows the color picker. Accepts no arguments. Use it to show the picker with an external trigger.<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="239"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="240"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="241"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>colpickSetColor(col,setCurrent)<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="242"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Use it to set the picker color. The <span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-external-link" target="_blank" href="http://colpick.com/plugin#options">#options</a>"&gt;</span>onChange callback<span class="webkit-html-tag">&lt;/a&gt;</span> is fired with bySetColor set to true. Parameters:</td></tr><tr><td class="webkit-line-number" value="243"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;ul&gt;</span></td></tr><tr><td class="webkit-line-number" value="244"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;li&gt;</span>col: a hex string (eg. 'd78b5a') or object for RGB (eg. {r:255, g:0, b:0}) and HSB (eg. {h:150, s:50, b:50})<span class="webkit-html-tag">&lt;/li&gt;</span></td></tr><tr><td class="webkit-line-number" value="245"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;li&gt;</span>setCurrent: If true the color picker's current color (the one to the right in layouts with submit button) is set in addition to the new color, which is always set.<span class="webkit-html-tag">&lt;/li&gt;</span></td></tr><tr><td class="webkit-line-number" value="246"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;/ul&gt;</span><span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="247"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="248"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;/table&gt;</span></td></tr><tr><td class="webkit-line-number" value="249"></td><td class="webkit-line-content">	</td></tr><tr><td class="webkit-line-number" value="250"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;h2&gt;</span>jQuery Functions<span class="webkit-html-tag">&lt;/h2&gt;</span></td></tr><tr><td class="webkit-line-number" value="251"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;p&gt;</span>The following functions are used internally by the color picker. However, they may also be required as utility functions by your application. They are made available as jQuery functions:<span class="webkit-html-tag">&lt;/p&gt;</span></td></tr><tr><td class="webkit-line-number" value="252"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;table <span class="webkit-html-attribute-name">border</span>="" <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">plugin-options</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="253"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="254"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;th&gt;</span>Function<span class="webkit-html-tag">&lt;/th&gt;</span></td></tr><tr><td class="webkit-line-number" value="255"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;th&gt;</span>Description<span class="webkit-html-tag">&lt;/th&gt;</span></td></tr><tr><td class="webkit-line-number" value="256"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="257"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="258"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>$.colpick.rgbToHex(rgb)<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="259"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Receives an object like {r:255, g:0, b:0} and returns the corresponding HEX string (with no #).<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="260"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="261"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="262"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>$.colpick.rgbToHsb(rgb)<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="263"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Receives an object like {r:255, g:0, b:0} and returns the corresponding HSB object (eg. {h:0, s:100, b:100}). HSB values are not rounded. H is in the [0,360] range, while S and B are in the [0,100] range.<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="264"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="265"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="266"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>$.colpick.hsbToHex(hsb)<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="267"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Receives an object like {h:0, s:100, b:100} and returns the corresponding HEX string (with no #).<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="268"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="269"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="270"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>$.colpick.hsbToRgb(hsb)<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="271"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Receives an object like {h:0, s:100, b:100} and returns the corresponding RGB object (eg. {r:255, g:0, b:0}). RGB values are whole numbers in the [0,255] range.<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="272"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="273"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="274"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>$.colpick.hexToHsb(hex)<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="275"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Receives a hex string with no # and returns the corresponding HSB object (eg. {h:0, s:100, b:100}). HSB values are not rounded. H is in the [0,360] range, while S and B are in the [0,100] range.<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="276"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="277"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="278"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>$.colpick.hexToRgb(hex)<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="279"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;td&gt;</span>Receives a hex string with no # and returns the corresponding RGB object (eg. {r:255, g:0, b:0}). RGB values are whole numbers in the [0,255] range.<span class="webkit-html-tag">&lt;/td&gt;</span></td></tr><tr><td class="webkit-line-number" value="280"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/tr&gt;</span></td></tr><tr><td class="webkit-line-number" value="281"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;/table&gt;</span></td></tr><tr><td class="webkit-line-number" value="282"></td><td class="webkit-line-content">	</td></tr><tr><td class="webkit-line-number" value="283"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">name</span>="<span class="webkit-html-attribute-value">examples</span>"&gt;</span><span class="webkit-html-tag">&lt;/a&gt;</span></td></tr><tr><td class="webkit-line-number" value="284"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;h2&gt;</span>Examples<span class="webkit-html-tag">&lt;/h2&gt;</span></td></tr><tr><td class="webkit-line-number" value="285"></td><td class="webkit-line-content">	</td></tr><tr><td class="webkit-line-number" value="286"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">example dark-example clearfix</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="287"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;h3&gt;</span>Example - HEX textfield using onChange callback<span class="webkit-html-tag">&lt;/h3&gt;</span></td></tr><tr><td class="webkit-line-number" value="288"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">example-code</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="289"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;p&gt;</span><span class="webkit-html-tag">&lt;span <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">code-lang</span>"&gt;</span>HTML<span class="webkit-html-tag">&lt;/span&gt;</span><span class="webkit-html-tag">&lt;/p&gt;</span><span class="webkit-html-tag">&lt;pre&gt;</span># &amp;lt;input type="text" id="picker"&amp;gt;&amp;lt;/input&amp;gt;<span class="webkit-html-tag">&lt;/pre&gt;</span></td></tr><tr><td class="webkit-line-number" value="290"></td><td class="webkit-line-content">				</td></tr><tr><td class="webkit-line-number" value="291"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;p&gt;</span><span class="webkit-html-tag">&lt;span <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">code-lang</span>"&gt;</span>JS<span class="webkit-html-tag">&lt;/span&gt;</span><span class="webkit-html-tag">&lt;/p&gt;</span> </td></tr><tr><td class="webkit-line-number" value="292"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;pre&gt;</span>$('#picker').colpick({</td></tr><tr><td class="webkit-line-number" value="293"></td><td class="webkit-line-content">	layout:'hex',</td></tr><tr><td class="webkit-line-number" value="294"></td><td class="webkit-line-content">	submit:0,</td></tr><tr><td class="webkit-line-number" value="295"></td><td class="webkit-line-content">	colorScheme:'dark',</td></tr><tr><td class="webkit-line-number" value="296"></td><td class="webkit-line-content">	onChange:function(hsb,hex,rgb,el,bySetColor) {</td></tr><tr><td class="webkit-line-number" value="297"></td><td class="webkit-line-content">		$(el).css('border-color','#'+hex);</td></tr><tr><td class="webkit-line-number" value="298"></td><td class="webkit-line-content">		// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.</td></tr><tr><td class="webkit-line-number" value="299"></td><td class="webkit-line-content">		if(!bySetColor) $(el).val(hex);</td></tr><tr><td class="webkit-line-number" value="300"></td><td class="webkit-line-content">	}</td></tr><tr><td class="webkit-line-number" value="301"></td><td class="webkit-line-content">}).keyup(function(){</td></tr><tr><td class="webkit-line-number" value="302"></td><td class="webkit-line-content">	$(this).colpickSetColor(this.value);</td></tr><tr><td class="webkit-line-number" value="303"></td><td class="webkit-line-content">});<span class="webkit-html-tag">&lt;/pre&gt;</span></td></tr><tr><td class="webkit-line-number" value="304"></td><td class="webkit-line-content">			</td></tr><tr><td class="webkit-line-number" value="305"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;p&gt;</span><span class="webkit-html-tag">&lt;span <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">code-lang</span>"&gt;</span>CSS<span class="webkit-html-tag">&lt;/span&gt;</span><span class="webkit-html-tag">&lt;/p&gt;</span> </td></tr><tr><td class="webkit-line-number" value="306"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;pre&gt;</span>#picker {</td></tr><tr><td class="webkit-line-number" value="307"></td><td class="webkit-line-content">	margin:0;</td></tr><tr><td class="webkit-line-number" value="308"></td><td class="webkit-line-content">	padding:0;</td></tr><tr><td class="webkit-line-number" value="309"></td><td class="webkit-line-content">	border:0;</td></tr><tr><td class="webkit-line-number" value="310"></td><td class="webkit-line-content">	width:70px;</td></tr><tr><td class="webkit-line-number" value="311"></td><td class="webkit-line-content">	height:20px;</td></tr><tr><td class="webkit-line-number" value="312"></td><td class="webkit-line-content">	border-right:20px solid green;</td></tr><tr><td class="webkit-line-number" value="313"></td><td class="webkit-line-content">	line-height:20px;</td></tr><tr><td class="webkit-line-number" value="314"></td><td class="webkit-line-content">}<span class="webkit-html-tag">&lt;/pre&gt;</span></td></tr><tr><td class="webkit-line-number" value="315"></td><td class="webkit-line-content">			</td></tr><tr><td class="webkit-line-number" value="316"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="317"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">example-ex</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="318"></td><td class="webkit-line-content">			# <span class="webkit-html-tag">&lt;input <span class="webkit-html-attribute-name">type</span>="<span class="webkit-html-attribute-value">text</span>" <span class="webkit-html-attribute-name">id</span>="<span class="webkit-html-attribute-value">picker3</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="319"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="320"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">clear</span>"&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="321"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="322"></td><td class="webkit-line-content">	</td></tr><tr><td class="webkit-line-number" value="323"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">example dark-example clearfix</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="324"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;h3&gt;</span>Example - Color boxes using onSubmit callback and rgbhex layout<span class="webkit-html-tag">&lt;/h3&gt;</span></td></tr><tr><td class="webkit-line-number" value="325"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">example-code</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="326"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;p&gt;</span><span class="webkit-html-tag">&lt;span <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">code-lang</span>"&gt;</span>HTML<span class="webkit-html-tag">&lt;/span&gt;</span><span class="webkit-html-tag">&lt;/p&gt;</span></td></tr><tr><td class="webkit-line-number" value="327"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;pre&gt;</span>&amp;lt;div class="color-box"&amp;gt;&amp;lt;/div&amp;gt;</td></tr><tr><td class="webkit-line-number" value="328"></td><td class="webkit-line-content">&amp;lt;div class="color-box"&amp;gt;&amp;lt;/div&amp;gt;</td></tr><tr><td class="webkit-line-number" value="329"></td><td class="webkit-line-content">&amp;lt;div class="color-box"&amp;gt;&amp;lt;/div&amp;gt;<span class="webkit-html-tag">&lt;/pre&gt;</span></td></tr><tr><td class="webkit-line-number" value="330"></td><td class="webkit-line-content">			</td></tr><tr><td class="webkit-line-number" value="331"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;p&gt;</span><span class="webkit-html-tag">&lt;span <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">code-lang</span>"&gt;</span>JS<span class="webkit-html-tag">&lt;/span&gt;</span><span class="webkit-html-tag">&lt;/p&gt;</span></td></tr><tr><td class="webkit-line-number" value="332"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;pre&gt;</span>$('.color-box').colpick({</td></tr><tr><td class="webkit-line-number" value="333"></td><td class="webkit-line-content">	colorScheme:'dark',</td></tr><tr><td class="webkit-line-number" value="334"></td><td class="webkit-line-content">	layout:'rgbhex',</td></tr><tr><td class="webkit-line-number" value="335"></td><td class="webkit-line-content">	color:'ff8800',</td></tr><tr><td class="webkit-line-number" value="336"></td><td class="webkit-line-content">	onSubmit:function(hsb,hex,rgb,el) {</td></tr><tr><td class="webkit-line-number" value="337"></td><td class="webkit-line-content">		$(el).css('background-color', '#'+hex);</td></tr><tr><td class="webkit-line-number" value="338"></td><td class="webkit-line-content">		$(el).colpickHide();</td></tr><tr><td class="webkit-line-number" value="339"></td><td class="webkit-line-content">	}</td></tr><tr><td class="webkit-line-number" value="340"></td><td class="webkit-line-content">})</td></tr><tr><td class="webkit-line-number" value="341"></td><td class="webkit-line-content">.css('background-color', '#ff8800');<span class="webkit-html-tag">&lt;/pre&gt;</span></td></tr><tr><td class="webkit-line-number" value="342"></td><td class="webkit-line-content">			</td></tr><tr><td class="webkit-line-number" value="343"></td><td class="webkit-line-content">				</td></tr><tr><td class="webkit-line-number" value="344"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;p&gt;</span><span class="webkit-html-tag">&lt;span <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">code-lang</span>"&gt;</span>CSS<span class="webkit-html-tag">&lt;/span&gt;</span><span class="webkit-html-tag">&lt;/p&gt;</span> </td></tr><tr><td class="webkit-line-number" value="345"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;pre&gt;</span>.color-box {</td></tr><tr><td class="webkit-line-number" value="346"></td><td class="webkit-line-content">	float:left;</td></tr><tr><td class="webkit-line-number" value="347"></td><td class="webkit-line-content">	width:30px;</td></tr><tr><td class="webkit-line-number" value="348"></td><td class="webkit-line-content">	height:30px;</td></tr><tr><td class="webkit-line-number" value="349"></td><td class="webkit-line-content">	margin:5px;</td></tr><tr><td class="webkit-line-number" value="350"></td><td class="webkit-line-content">	border: 1px solid white;</td></tr><tr><td class="webkit-line-number" value="351"></td><td class="webkit-line-content">}<span class="webkit-html-tag">&lt;/pre&gt;</span></td></tr><tr><td class="webkit-line-number" value="352"></td><td class="webkit-line-content">			</td></tr><tr><td class="webkit-line-number" value="353"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="354"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">example-ex</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="355"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">id</span>="<span class="webkit-html-attribute-value">picker4</span>" <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">ex-color-box</span>"&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="356"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">id</span>="<span class="webkit-html-attribute-value">picker5</span>" <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">ex-color-box</span>"&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="357"></td><td class="webkit-line-content">			<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">id</span>="<span class="webkit-html-attribute-value">picker6</span>" <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">ex-color-box</span>"&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="358"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="359"></td><td class="webkit-line-content">		<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">clear</span>"&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="360"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="361"></td><td class="webkit-line-content">	</td></tr><tr><td class="webkit-line-number" value="362"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;h2&gt;</span>Comments &amp; Feedback<span class="webkit-html-tag">&lt;/h2&gt;</span></td></tr><tr><td class="webkit-line-number" value="363"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;div <span class="webkit-html-attribute-name">class</span>="<span class="webkit-html-attribute-value">fb-comments</span>" <span class="webkit-html-attribute-name">data-href</span>="<span class="webkit-html-attribute-value">http://colpick.com</span>" <span class="webkit-html-attribute-name">data-width</span>="<span class="webkit-html-attribute-value">642</span>" <span class="webkit-html-attribute-name">data-colorscheme</span>="<span class="webkit-html-attribute-value">dark</span>"&gt;</span><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="364"></td><td class="webkit-line-content">	</td></tr><tr><td class="webkit-line-number" value="365"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;h2&gt;</span>License<span class="webkit-html-tag">&lt;/h2&gt;</span></td></tr><tr><td class="webkit-line-number" value="366"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;p&gt;</span>Dual licensed under the MIT and GPL licenses.<span class="webkit-html-tag">&lt;/p&gt;</span></td></tr><tr><td class="webkit-line-number" value="367"></td><td class="webkit-line-content">	<span class="webkit-html-tag">&lt;p&gt;</span>Based on Stefan Petre's color picker available at <span class="webkit-html-tag">&lt;a <span class="webkit-html-attribute-name">href</span>="<a class="webkit-html-attribute-value webkit-html-external-link" target="_blank" href="http://www.eyecon.ro/colorpicker">http://www.eyecon.ro/colorpicker</a>"&gt;</span>eyecon.ro/colorpicker<span class="webkit-html-tag">&lt;/a&gt;</span><span class="webkit-html-tag">&lt;/p&gt;</span></td></tr><tr><td class="webkit-line-number" value="368"></td><td class="webkit-line-content"><br></td></tr><tr><td class="webkit-line-number" value="369"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;/div&gt;</span></td></tr><tr><td class="webkit-line-number" value="370"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;footer&gt;</span></td></tr><tr><td class="webkit-line-number" value="371"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;p&gt;</span>Copyright 2013 Jose Vargas.<span class="webkit-html-tag">&lt;/p&gt;</span></td></tr><tr><td class="webkit-line-number" value="372"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;/footer&gt;</span></td></tr><tr><td class="webkit-line-number" value="373"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;script <span class="webkit-html-attribute-name">type</span>="<span class="webkit-html-attribute-value">text/javascript</span>"&gt;</span></td></tr><tr><td class="webkit-line-number" value="374"></td><td class="webkit-line-content">  (function() {</td></tr><tr><td class="webkit-line-number" value="375"></td><td class="webkit-line-content">    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;</td></tr><tr><td class="webkit-line-number" value="376"></td><td class="webkit-line-content">    po.src = 'https://apis.google.com/js/plusone.js';</td></tr><tr><td class="webkit-line-number" value="377"></td><td class="webkit-line-content">    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);</td></tr><tr><td class="webkit-line-number" value="378"></td><td class="webkit-line-content">  })();</td></tr><tr><td class="webkit-line-number" value="379"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;/script&gt;</span></td></tr><tr><td class="webkit-line-number" value="380"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;/body&gt;</span></td></tr><tr><td class="webkit-line-number" value="381"></td><td class="webkit-line-content"><span class="webkit-html-tag">&lt;/html&gt;</span><span class="webkit-html-end-of-file"></span></td></tr></tbody></table></body></html>